import React, { Component } from 'react';
import App from './bs4/App';
// import G1 from './G1';
// import QTodos from './query/AppTodo';
// import Todos_mui from './todos/index_mui';
// import App_redux from './mui_redux/index';
import App_use from './redux_use/index2';
import Bs4_use from './bs4_use/App';
import App_unext from './unext/index2';
// import SelectPack from './redux_use/SelectPack3'
import {HashRouter as Router, Route,Switch,Link} from 'react-router-dom'
class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false };
  }

  static getDerivedStateFromError(error) {
    // Update state so the next render will show the fallback UI.
    return { hasError: true };
  }

  render() {
    if (this.state.hasError) {
      // You can render any custom fallback UI
      return <h1>Something went wrong.</h1>;
    }

    return this.props.children;
  }
}
function Demo(){
  return(<div>demo</div>);
}
// function ErrQ(){
//   return(<ErrorBoundary><QTodos/></ErrorBoundary>);
// }
function Index(){
    return(<div style={{display:"flex",width:"600px"
          ,justifyContent:"space-between"
          ,alignItems:"center"}}>
                <Link to="/bs4" >bs4 App</Link>
                <Link to="/Bs4_use" >App use</Link>
<Link to="/App_unext" >App_unext</Link>
              </div>);
}
function Routers(){
    return(<Switch>
<Route exact path="/App_unext" component={App_unext} />
      <Route exact path="/Bs4_use" component={Bs4_use} />
      <Route exact path="/bs4" component={App} />
      <Route exact path="/index" component={Index} />
      <Route component={App}/>
    </Switch>);
}
export default function Root(){
    return (
        <Router>
            <Routers />
        </Router>
    );
}

